<template>
	<view id="apps">


		<!-- header -->
		<view class="header">
			<view class="back" @click="back()">
				<image src="/static/images/CaretLeft.png" mode="widthFix"></image>
			</view>
			<!--<text>商户信息</text>-->
		</view>

		<!-- info_img -->
		<view class="info_img">
			<image src="/static/images/bn.png" mode="widthFix"></image>
		</view>


		<!-- 商户介绍 -->
		<view class="shjs_box">
			<view class="box">


				<!-- logo_box -->
				<view class="logo_box">
					<view class="logo">
						<image :src="shop.store.cover_url" mode="widthFix"></image>
					</view>
					<view class="text">
						<text class="t">{{detail.store.name}}</text>
						<view class="star_box">
							<view class="star">
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star.png" mode="widthFix"></image>
								<image src="/static/images/star2.png" mode="widthFix"></image>
							</view>
							<text class="fs">4.7</text>
							<view class="price">
								<text>￥44</text>
								<text> / 人</text>
							</view>
						</view>
						<view class="ts">
							<image src="/static/images/icon_ms@2x.png" mode="widthFix"></image>
							<text>湘菜，烧烤，火锅</text>
						</view>
					</view>
				</view>


				<!-- 店铺简介： -->
				<view class="dpjj">
					<view class="t">
						<image src="/static/images/icon_menu@2x.png" mode="widthFix"></image>
						<text>店铺简介：</text>
					</view>
					<text class="s">{{shop.store.scope}}</text>
				</view>



				<!-- 买单 -->
				<view class="maidan">
					<view class="text">
						<view class="time">
							<text>营业中</text>
							<text>11：00-02：30</text>
							<image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
						</view>
						<view class="desc">
							<text>{{shop.store.description}}</text>
							<image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
						</view>
					</view>
					<!--<template v-if="memberLevel==3">-->
					<template>
						<button @click="payGo">买单</button>
					</template>
				</view>



			</view>
		</view>





		<!-- tab -->
		<view class="tab">
			<text :class="tab == 2 ? 'active' : ''" @click="tabChange(2)">全部</text>
			<text :class="tab == 5 ? 'active' : ''" @click="tabChange(5)">新品推荐</text>
		</view>

        <u-ordinary-list v-if="tab == 2" :reset="reset" :pagination="true" :isShowAttr="true" :previewUrl="order_preview" :submitUrl="order_submit" :list="goods_list" :theme="getTheme" :list-style="2"></u-ordinary-list>

		<view v-for="(v,k) in goods_list" :key="k" v-if="tab == 5">
			<u-ordinary-list :reset="reset" :pagination="true" :isShowAttr="true" :previewUrl="order_preview" :submitUrl="order_submit" :list="v.goods_list" :theme="getTheme" :list-style="2"></u-ordinary-list>
		</view>
	</view>
</template>


<script>
    import {mapGetters, mapState} from 'vuex';
    import uOrdinaryList from '../../../components/page-component/u-goods-list/u-ordinary-list-new.vue';

    export default {
        name: "shop",
        components: {
            uOrdinaryList
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.info,
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
			// 判断用户等级，3：实体商家
			memberLevel: function () {
				return this.$storage.getStorageSync('member_level');
			},
        },
        data() {
            return {
                mch_id: -1,
                sort: 1,
                cat_id: 0,
                sort_type: 0,
                page: 1,
                load: false,
                args: false,
                is_service: 0,
                markers: [],
                shop: {store: {}},
                mchSetting: {},

                detail: {store: {}},
                mch_setting: {},

                tab: 2,
                shopKf: false,
                coupon_list: [],
                goods_list: [],
                fixed: false,
                order_preview: this.$api.mch.order_preview,
                order_submit: this.$api.mch.order_submit,

                attrGoods: {
                    attrShow: 0,
                    goods: {}
                },
                reset: true
            }
        },
        onLoad(options) { //this.$commonLoad.onload(options);
            //this.$store.dispatch('user/info');
            this.mch_id = options.mch_id;
            this.cat_id = options.cat_id ? options.cat_id : 0;
            this.loadShop();
            this.getGoods();
            this.getOption();
            this.addVisit();
        },
        onReachBottom: function () {
            const self = this;
            this.reset = false;
            if (self.args || self.load) return;
            self.load = true;
            let page = self.page + 1;
            self.$request({
                url: self.$api.mch.goods,
                data: {
                    page: page,
                    mch_id: self.mch_id,
                    sort: self.sort,
                    sort_type: self.sort_type,
                    mch_status: 2,
                    cat_id: self.cat_id,
                }
            }).then(info => {
                if (info.code === 0) {
                    let goods_list;
                    if (self.sort === 5) {
                        goods_list = self.formatList(self.goods_list, info.data.list);
                    } else {
                        goods_list = self.goods_list.concat(info.data.list);
                    }
                    [self.page, self.args, self.goods_list] = [page, info.data.list.length === 0, goods_list];
                }
                self.load = false;
            });
        },
        // #ifdef MP
        onShareAppMessage () {
            return this.$shareAppMessage({
                title: this.detail.store.name,
                path: '/plugins/mch/shop/shop',
                params: {
                    mch_id: this.mch_id,
                }
            });
        },
        // #endif
        methods: {
          // 买单
          payGo() {
            uni.navigateTo({url: '/plugins/mch/pay/pay?mch_id=' + this.mch_id});
          },
            goodsSearch() {
                uni.navigateTo({url: '/pages/search/search?mch_id=' + this.mch_id});
            },
            navCat() {
                uni.navigateTo({url: '/plugins/mch/cat/cat?mch_id=' + this.mch_id});
            },
            navigateSummary() {
                uni.navigateTo({url: `/plugins/mch/summary/summary?mch_id=` + this.mch_id});
            },
            navigateCs() {
                uni.navigateTo({url: `/pages/web/web?url=` + this.mch_setting.web_service_url});
            },
            getOption() {
                const self = this;
                self.$request({
                    url: self.$api.mch.setting,
                }).then(info => {
                    if (info.code === 0) {
                        self.is_service = info.data.setting.is_service;
                    }
                })
            },
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

            loadShop() {
                const self = this;

                self.$showLoading();
                self.$request({
                    url: self.$api.mch.detail,
                    data: {
                        id: self.mch_id
                    }
                }).then(info => {
                    self.$hideLoading();
                    if (info.code === 0) {
                        [self.detail, self.mch_setting] = [info.data.detail, info.data.mchSetting];
                        uni.setNavigationBarTitle({
                            title: self.detail.store.name,
                        });
						let shop = info.data.detail;
						let markers = [{
							iconPath: "./../image/summary-map.png",
							id: 0,
							width: 43,
							height: 43,
							longitude: shop.store.longitude,
							latitude: shop.store.latitude,
						}];
						[
							self.markers,
							self.shop,
							self.mchSetting
						] = [
							markers,
							shop,
							info.data.mchSetting
						]
                    }
                }).catch(info => {
                    self.$hideLoading();
                })
            },

            addVisit() {
                const self = this;
                self.$request({
                    url: self.$api.mch.visit,
                    method: "POST",
                    data: {
                        mch_id: self.mch_id
                    }
                }).then(info => {
                })
            },

            getGoods: function () {
                const self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.mch.goods,
                    data: {
                        page: 1,
                        mch_id: self.mch_id,
                        sort: self.sort,
                        sort_type: self.sort_type,
                        mch_status: 2,
                        cat_id: self.cat_id,
                    }
                }).then(info => {
                    self.$hideLoading();
                    if (info.code === 0) {
                        self.goods_list = info.data.list;
                    }
					console.log('self.goods_list==='+JSON.stringify(self.goods_list));
                }).catch(info => {
                    self.$hideLoading();
                })
            },

            //TODO
            changeStyle: function (sort) {
                let old_sort = this.sort;
                if (old_sort === 3 && sort === 3) {
                    this.sort_type = this.sort_type ? 0 : 1;
                }
                this.reset = true;
                [this.sort, this.goods_list, this.page, this.args, this.cat_id, this.goods_list] = [sort, [], 1, false, 0,[]];
                this.getGoods();
            },

            tabChange: function (e) {
                this.reset = true;
                [this.sort, this.tab, this.page, this.args, this.cat_id, this.goods_list] = [e, e, 1, false, 0, []];
                this.getGoods();
            },

            //KfModel
            copyInfo() {
                this.$utils.uniCopy({
                    data: this.detail.wechat,
                    success(){
                        //#ifndef MP-WEIXIN
                        uni.showToast({ title: '复制成功'});
                        // #endif
                    }
                });
            },

            callPhone() {
                uni.makePhoneCall({
                    phoneNumber: this.detail.store.mobile
                })
            },

            openKfModal() {
                this.shopKf = true;
            },

            closeKfModal() {
                this.shopKf = false;
            },
            formatList: function (oldArray, addArray) {
                if (!addArray.length) {
                    return odlArray;
                }
                let newList, list;
                let end = oldArray.pop();
                let start = addArray.shift();
                if (end.label === start.label) {
                    end.goods_list = end.goods_list.concat(start.goods_list);
                    list = end;
                } else {
                    oldArray = oldArray.concat(end);
                    list = start;
                }
                newList = oldArray.concat(list);
                newList = newList.concat(addArray);
                return newList;
            }
        }
    }
</script>

<style lang="scss" scoped>

	page{
		background: #f3f3f3;
	}

	#apps{

		display: flex;
		flex-direction: column;

		// header
		.header{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			padding: 0 32rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #fff;
			z-index: 1000;
			text-align: center;
			.back{
				position: absolute;
				left: 0rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				height: 88rpx;
				width: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 54rpx;
					height: auto;
				}
			}
			text{
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
			}
		}


		// .info_img
		.info_img{
			margin-top: 88rpx;
			width: 100%;
			height: auto;
			position: relative;
			z-index: 1;
			image{
				width: 100%;
				height: auto;
			}
		}



		// 商户介绍
		.shjs_box{
			background: #f3f3f3;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			position: relative;
			z-index: 1;
			border-radius: 20rpx;

			.box{
				background: #fff;
				padding: 36rpx 22rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}

			.logo_box{
				display: flex;
				align-items: center;
				.logo{
					width: 144rpx;
					height: auto;
					image{
						width: 144rpx;
						border-radius: 100px;
						height: auto;
					}
				}
				.text{
					margin-left: 20rpx;
					.t{
						font-size: 48rpx;
						font-weight: bold;
					}
					.star_box{
						margin: 15rpx 0;
						display: flex;
						align-items: center;
						.star{
							display: flex;
							align-items: center;
							image{
								width: 26rpx;
								height: auto;
							}
						}
						.fs{
							font-size: 22rpx;
							color: $index_color;
							font-weight: bold;
							margin: 0 10rpx;
							box-sizing: border-box;
						}
						.price{
							font-size: 22rpx;
							color: #666;
						}
					}
				}
				.ts{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: auto;
					}
					text{
						font-size: 28rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
			}

		}



		// 店铺简介
		.dpjj{
			display: block;
			margin-top: 30rpx;
			.t{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: auto;
				}
				text{
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
			.s{
				font-size: 28rpx;
				color: #666;
				padding-left: 50rpx;
				padding-top: 10rpx;
				display: block;
				line-height: 40rpx;
			}
		}


		// 买单
		.maidan{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			line-height: 40rpx;
			.text{
				flex: 1;
				margin-right: 80rpx;
				.time{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666;
					image{
						width: 12rpx;
						height: auto;
					}
					text{
						margin-right: 20rpx;
					}
				}
				.desc{
					font-size: 24rpx;
					color: #666;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 20rpx;
					}
				}
			}

			button{
				width: 120rpx;
				height: 120rpx;
				background:$index_color;
				box-shadow: 0px 10px 14px rgba(224, 79, 66, 0.45);
				border-radius: 50%;
				color: #fff;
				font-size: 34rpx;
				line-height: 120rpx;
				margin: 0 20rpx 20rpx 0;
			}
		}



		// tab
		.tab{
			display: flex;
			align-items: center;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			text{
				font-size: 32rpx;
				color: #666;
				font-weight: bold;
				margin-right: 40rpx;
				&.active{
					color: #333;
					position: relative;
					&::after{
						content: '';
						background: $index_color;
						width: 80%;
						height: 8rpx;
						border-radius: 100px;
						display: inline-block;
						position: absolute;
						left: 0;
						right: 0;
						bottom: -10rpx;
						margin: auto;
					}
				}
			}
		}



		// list
		.list{
			padding: 32rpx;
			box-sizing: border-box;
			.list_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 26rpx 20rpx;
				margin-bottom: 20rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}
				.text{
					flex: 1;
					margin-left: 30rpx;
					.t{
						font-size: 32rpx;
						font-weight: bold;
						display: block;
						line-height: 30rpx;
					}
					.s{
						font-size: 22rpx;
						color: $index_color;
					}
					.price{
						margin-top: 20rpx;
						.xj{
							font-size: 26rpx;
							color: $index_color;
							font-weight: bold;
							/* &::before{
								content: '￥';
								font-size: 20rpx;
								color: #666;
								font-weight: normal;
							} */
						}
						.yj{
							font-size: 22rpx;
							color: #999;
							margin-left: 20rpx;
							font-weight: bold;
							text-decoration:line-through;
							// &::before{
							// 	content: '￥';
							// 	font-size: 22rpx;
							// 	color: #999;
							// 	font-weight: normal;
							// }
						}
					}
				}

				.btns{
					button{
						width: 120rpx;
						height: 58rpx;
						line-height: 58rpx;
						color: #fff;
						font-size: 32rpx;
						background: linear-gradient(180deg, #DE4335 0%, #F88365 100%);
						box-shadow: 0px 6rpx 12rpx rgba(246, 126, 97, 0.47);
						border-radius: 10rpx;
					}
					text{
						font-size: 22rpx;
						color: #999;
						display: block;
						text-align: center;
						margin-top: 10rpx;
					}
				}
			}
		}



	}


</style>
